<template>
	<view class="content">
		<view class="tankuang" v-if="isTouming">
			<view class="box">
				<image
					src="../../static/guanbi.png"
					mode=""
					class="image"
					@click="isTouming = false"
				></image>
				<text class="text">{{ bulletInfo.name }}</text>
				<view class="info1">
					<image src="../../static/ss2.png" mode=""></image>
					<text>{{ bulletInfo.phone }}</text>
				</view>
				<view class="info1">
					<image src="../../static/ss3.png" mode=""></image>
					<text>{{ bulletInfo.site }}</text>
				</view>
				<view class="info1">
					<image src="../../static/ss1.png" mode=""></image>
					<text>
						{{
							bulletInfo.site_time == null
								? ''
								: bulletInfo.site_time
						}}
					</text>
				</view>
			</view>
		</view>
		<!-- <u-empty text="订单为空" mode="order" v-if="showkong"></u-empty> -->
		<view
			v-for="(item, index) in data"
			:key="index"
			style="margin-bottom: 25rpx;"
		>
			<view class="ordr">
				<view class="top">
					<view class="sts">
						<text class="text">
							当前为{{ item.num }}/{{ item.full }}单:
						</text>
						<view class="image">
							<bolck
								v-for="(item2, index2) in item.full + 1"
								:key="index2"
							>
								<image
									src="../../static/duixiang2.png"
									mode=""
									v-if="index2 < item.num"
								></image>
								<image
									src="../../static/caise2.png"
									mode=""
									v-else-if="
										index2 === item.full &&
											item.num < item.full
									"
								></image>
								<image
									src="../../static/caise333.png"
									mode=""
									v-else-if="
										index2 === item.full &&
											item.num === item.full
									"
								></image>
								<image
									src="../../static/duixiang3.png"
									mode=""
									v-else
								></image>
							</bolck>
						</view>
					</view>
					<view class="prc">
						<text>￥{{ item.free_money }}</text>
						<text>当前免单金</text>
					</view>
				</view>

				<view class="one">
					<view class="ordrNum">
						<text class="text1">订单号:{{ item.number }}</text>
						<text class="text2">{{ item.status }}</text>
					</view>
					<view class="info">
						<view class="top1">
							<view
								class="left"
								@click="storeIntroduction(item.sid)"
							>
								<image :src="item.cover" mode=""></image>
							</view>
							<view class="right">
								<view class="right1">
									<view
										class=""
										@click="storeIntroduction(item.sid)"
									>
										{{ item.name }}
									</view>
									<image
										src="../../static/zhu111.png"
										mode=""
										@click.stop="
											getLocationBulletBox(item.sid)
										"
									></image>
								</view>
								<view class="right2">
									<text @click="storeIntroduction(item.sid)">
										已售{{ item.sold }}
									</text>
									<text @click="storeIntroduction(item.sid)">
										人均￥{{ item.price }}/人
									</text>
									<!-- <text @click="storeIntroduction(item.sid)">点评:{{ item1.review }}</text> -->
								</view>
								<view class="right3">
									<text @click="storeIntroduction(item.sid)">
										{{ item.type }}
									</text>
									<text
										@click="storeIntroduction(item.sid)"
										class="text"
									>
										{{ item.site }}
									</text>
									<text>{{ item.changdu }}km</text>
								</view>
								<view class="right4">
									<text @click="storeIntroduction(item.sid)">
										{{ item.free }}
									</text>
									<!-- <text @click="huodong()">5折</text> -->
									<text>￥{{ item.money }}</text>
								</view>
								<!-- <view class="right5">
										<text>活动时间:永久</text>
									</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			isTouming: false,
			uid: '',
			data: [],
			bulletInfo: {},
			showkong: false,
			page: 1, // 多少页
			limit: 3, // 一页显示多少个
			msg: 0, //  显示的总条数
			status: 'loadmore',
			yy: 0
		};
	},
	methods: {
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},

		//
		//跳转门店介绍
		storeIntroduction(id) {
			console.log('id :>> ', id);
			uni.navigateTo({
				url: '../my/introduction/introduction?id=' + id
			});
		},
		// 跳转活动
		huodong() {
			uni.navigateTo({
				url: '../my/activity/activity'
			});
		},
		//获取用户订单
		async getOrdr() {
			try {
				const uid = uni.getStorageSync('uid');
				if (uid) {
					console.log('this.page >>  ', this.page);
					console.log('this.limit >>  ', this.limit);
					const res = await this.$u.post('api/users/user_order', {
						uid: this.uid,
						page: this.page,
						limit: this.limit
					});
					this.msg = res.msg;
			

					if (res.data.length == this.limit   ) {
						this.status = 'loading';
						this.data = [...this.data, ...res.data];
					} else {
					
						this.data = [...this.data, ...res.data];
						this.status = 'nomore';
						return false;
					}

					console.log('订单的数据 >>  ', this.data);
					this.data.forEach((e, index) => {
						try {
							const userLocation = uni.getStorageSync(
								'userLocation'
							);
							if (userLocation) {
								var _this = this;
								var list = userLocation.split(',');
								var longitude1 = list[0];
								var latitude2 = list[1];
								// console.log('longitude1 :>> ', longitude1);
								// console.log('latitude2 :>> ', latitude2);
								// console.log('longitude11111 :>> ', e1.longitude);
								// console.log('dimension22222 :>> ', e1.dimension);

								var juli = this.calculateDistance(
									longitude1,
									latitude2,
									e.longitude,
									e.dimension
								);
								console.log('当前的距离>> ', juli);
								_this.data[index].changdu = juli;
							}
						} catch (e) {
							// error
						}
					});
				}
			} catch (e) {
				// error
			}
		},
		//获取位置弹框
		async getLocationBulletBox(i) {
			console.log('i :>> ', i);
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: i
			});

			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		}
	},
	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
			}
		} catch (e) {
			// error
		}

		this.getOrdr();
	},
	onReachBottom() {
		this.page = this.page + 1;
		this.getOrdr();
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	padding: 30rpx;
	background-color: #f8f8f8;

	.tankuang {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}

	.ordr {
		padding: 20rpx;
		background-color: #ffffff;

		.top {
			width: 100%;
			height: 90rpx;
			border-bottom: 2rpx solid #ececec;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sts {
				display: flex;
				align-items: center;

				.text {
					line-height: 90rpx;
					font-size: 34rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #333333;
					//margin-right: 20rpx;
				}

				.image {
					image {
						display: inline-block;
						line-height: 90rpx;
						width: 46rpx;
						height: 46rpx;
						margin-left: 8rpx;
					}
				}
			}

			.prc {
				// margin-left: -80rpx;

				text:nth-child(1) {
					display: block;
					font-size: 36rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
					text-align: right;
				}

				text:nth-child(2) {
					display: block;
					margin-top: -6rpx;
					font-size: 20rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
					text-align: right;
				}
			}
		}

		.one {
			border-bottom: 2rpx solid #ececec;
			padding-bottom: 20rpx;

			.ordrNum {
				display: flex;
				justify-content: space-between;
				margin: 18rpx 0 0 0;

				.text1 {
					height: 23px;
					font-size: 24rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.text2 {
					height: 23rpx;
					font-size: 23rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
				}
			}

			.info {
				background: #fff;
				border-radius: 20rpx;
				// padding: 20rpx;

				.top1 {
					display: flex;

					.left {
						width: 201rpx;
						height: 241rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: 430rpx;

						.right1 {
							height: 30rpx;
							line-height: 30rpx;
							display: flex;
							justify-content: space-between;
							margin-bottom: 19rpx;

							view {
								height: 30rpx;
								font-size: 30rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 500;
								color: #333333;
							}

							image {
								width: 90rpx;
								height: 30rpx;
							}
						}

						.right2 {
							height: 23rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 19rpx;
							display: flex;
							justify-content: space-between;

							// text:nth-child(1) {
							// 	margin-right: 20rpx;
							// }

							// text:nth-child(2) {
							// 	margin-right: 20rpx;
							// }
						}

						.right3 {
							height: 23rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 19rpx;
							display: flex;
							justify-content: space-between;
							margin-bottom: 47rpx;
							.text {
								width: 240rpx;
								text-align: center;
								height: 35rpx;
								white-space: nowrap; /* 规定文本是否折行 */
								overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
								text-overflow: ellipsis;
							}
						}

						.right4 {
							margin-bottom: 11rpx;
							display: flex;
							justify-content: space-between;

							text {
								display: inline-block;
								text-align: center;
								color: #fefefe;
							}

							text:nth-child(1) {
								width: 136rpx;
								height: 40rpx;
								line-height: 40rpx;

								background: linear-gradient(
									90deg,
									#ff6494 0%,
									#ffa86a 100%
								);
								border-radius: 5rpx;
								margin-right: 20rpx;
							}

							// text:nth-child(1) {
							// 	width: 80rpx;
							// 	height: 40rpx;
							// 	line-height: 40rpx;
							// 	background: linear-gradient(
							// 		180deg,
							// 		#ff6494 0%,
							// 		#ffa86a 100%
							// 	);
							// 	border-radius: 5rpx;
							// 	margin-right: 100rpx;
							// }

							text:nth-child(2) {
								// width: 85rpx;
								// height: 40rpx;
								// line-height: 40rpx;

								font-size: 24rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 500;
								color: #ff0000;
							}
						}

						.right5 {
							text {
								width: 344rpx;
								height: 19rpx;
								font-size: 20rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}
			}
		}
	}
}
</style>
